<template>
  <div class="usercenter">
    <div class="header">
      <div class="header_title">
        <div class="title_avatar">
          <img :src="business.avatar_cdn" />
        </div>
        <div class="title_content">
          <div class="content_text">{{ business.nickname }}</div>
          <div class="content_sm">{{ business.mobile_text }}</div>
        </div>
      </div>
    </div>
    <div class="userorder">
      <div class="order_project">
        <div class="item">
          <router-link to="/sale/poster" class="item">
            <div class="img">
              <img src="/assets/images/retail1.png" alt="" />
            </div>
            分销信息
          </router-link>
        </div>
        <div class="item">
          <router-link to="/sale/business" class="item">
            <div class="img">
              <img src="/assets/images/retail2.png" alt="" />
            </div>
            分销会员
          </router-link>
        </div>
        <div class="item">
          <router-link to="/sale/money" class="item">
            <div class="img">
              <img src="/assets/images/retail3.png" alt="" />
            </div>
            分销佣金
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/coupon" class="item">
            <div class="img">
              <img src="/assets/images/coupon.png" alt="" />
            </div>
            优惠列表
          </router-link>
        </div>
        <div class="item solid-left">
          <router-link to="/business/pay" class="item">
            <div class="img">
              <img src="/assets/images/recharge2.png" alt="" />
            </div>
            充值中心
          </router-link>
        </div>
      </div>
    </div>
    <div class="usertool">
      <div class="list">
        <div class="item">
          <router-link to="/business/profile">
            <div class="img">
              <img src="/assets/images/profile.png" alt="" />
            </div>
            基本资料
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/email">
            <div class="img"><img src="/assets/images/email.png" alt="" /></div>
            邮箱认证
          </router-link>
        </div>
        <div class="item">
          <router-link to="/address">
            <div class="img">
              <img src="/assets/images/address.png" alt="" />
            </div>
            收货地址
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/record">
            <div class="img">
              <img src="/assets/images/consume.png" alt="" />
            </div>
            消费记录
          </router-link>
        </div>
        <div class="item">
          <router-link to="/order">
            <div class="img">
              <img src="/assets/images/recharge2.png" alt="" />
            </div>
            我的订单
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/recommend">
            <div class="img">
              <img src="/assets/images/quanbu.png" alt="" />
            </div>
            种草分享
          </router-link>
        </div>
        <div class="item">
          <a href="javascript:void(0)" @click="OnLogout">
            <div class="img">
              <img src="/assets/images/returns.png" alt="" />
            </div>
            退出登录
          </a>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="userorder" v-if="ProductList.length > 0">
      <div class="list">
        <div class="item" v-for="item in ProductList" :key="item.id">
          <router-link
            :to="{ path: '/product/info', query: { proid: item.id } }"
          >
            <div class="thumb">
              <van-image
                width="100%"
                height="150px"
                fit="cover"
                :src="item.thumb_text"
              />
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="box">
              <div class="price">
                <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                <span :class="item.live_price ? 'product_price' : ''"
                  >￥{{ item.price }}</span
                >
              </div>
              <div class="buy-count">{{ item.buy_count }}人付款</div>
            </div>
            <div class="box">
              <div class="region">{{ item.region_text }}</div>
              <div class="chat">
                <van-icon name="chat-o" color="#ff5000" size="16" />
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 获取用户数据
const business = proxy.$business;
// 响应式产品数据
const ProductList = ref([]);
// 生命周期函数，在挂载前执行
onBeforeMount(() => GetProductData());
// 退出账号
const OnLogout = () => {
  proxy
    .$confirm({
      title: "退出账号",
      message: "是否确认退出当前账号？",
    })
    .then((result) => {
      proxy.$success({
        message: "退出当前账号成功",
        onClose: () => {
          // 清空用户数据
          proxy.$business.value = {};
          // 跳转到登录页
          proxy.$router.push("/business/login");
        },
      });
    })
    .catch((err) => {});
};

// 请求产品数据
const GetProductData = async () => {
  let result = await proxy.$http.post({
    url: "/business/product",
  });
  if (result.code === 1) {
    ProductList.value = result.data;
  }
};
</script>

<style scoped>
@import url("/assets/css/BusinessIndex.css");
</style>